@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root { --accent: #F14938; --primary: #000000; --secondary: #414141; --background: #EAECED; --green: #62A248; --white: #FFFFFF;}

html {scroll-behavior: smooth;}
a {cursor: pointer; color: var(--accent); text-decoration: none;}
header {margin: 0px; padding: 30px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;}
h1 {font-size: 60px;} 
h2 {font-size: 48px;} 
h3 {font-size: 32px;}
h4 {font-size: 24px; font-weight: 400;}
input[type="checkbox"] {accent-color: var(--accent);}

table {text-align: left;}


#sidebar {z-index: 991; position: fixed; margin: 0px; padding: 0px; width: 72px; height: 100%; gap: 8px; display: flex; flex-direction: column; align-items: center; border-right: 1px solid var(--background); background-color: var(--white);}
#sidebar-content {z-index: 899; position: relative; top: 0px; left: 72px; margin: 0px; padding: 80px 0px 0px 0px; width: calc(100% - 72px); background-color: var(--white);}

#spotlight {z-index: 992; position: fixed; width: 100%; height: 100%; display: none; background-color: rgba(0,0,0,0.75); align-items: center; justify-content: center;}
.spotlight-content {padding: 30px; width: 75%; display: none; border-radius: 16px; background-color: var(--white);}



#locations-add {display: flex; flex-direction: column;}


.table-dashboard {table-layout: fixed; margin: 0px 30px; padding: 0px; width: calc(100% - 60px); box-sizing: border-box; border-collapse: collapse;}
.table-dashboard > tr > td {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.table-dashboard > tr > td:first-child {padding-left: 10px; border-radius: 4px 0px 0px 4px;}
.table-dashboard > tr > td:last-child {padding-right: 10px; border-radius: 0px 4px 4px 0px;}
.table-dashboard > tr:hover {cursor: pointer; background-color: var(--background);}
.table-dashboard > tr {height: 32px;}

.table-row-disabled {font-style: italic; color: var(--secondary);}

#topbar-user p:first-child {margin: 0px; text-align: right;}
#topbar-user p:last-child {margin: 0px; font-size: 14px; color: var(--secondary); text-align: right;}

.spinner {margin: 0; padding: 0; width: 100%; height: 100%; min-width: 24px; min-height: 24px; border: 5px solid var(--accent); border-top: 5px solid #F3F3F3; border-radius: 50%; animation: spin 1s linear infinite;}


.color-secondary {color: var(--secondary);}
.flex-align-right {justify-content:right;}
.flex-center-v {align-items: center;}
.flex-col {display: flex; flex-direction: column;}
.flex-row {display: flex; flex-direction: row;}
.gap {gap: 24px;}

/* overflow: hidden; text-overflow: ellipsis; white-space: nowrap; */

select {appearance: none; width: 100%; min-height: 44px;}
#select-wrapper::after {position: absolute; border-color: transparent #000 transparent transparent;}
/* #select-wrapper::after {content: "-"; position: absolute; right: 10px; top: 50%; transform: translate(-50%); pointer-events: none;} */
#select-wrapper {position: relative; display: inline-block; width: 90px;}

/* select {appearance: none;}
select::part(button) {background-color: #f0f0f0; border: 1px solid #ccc; padding: 10px; border-radius: 4px; }
::picker(select) {background-color: red; border: 1px solid #ccc; border-radius: 4px;}
option {padding: 10px;}
option::before {content: "s"; margin-right: 5px;} */


/* #locations-create {display: none;}
#locations-details {display: none;} */



/* #topbar-user {cursor: pointer; display: flex; width: 36px; height: 36px; align-items: center; justify-content: center; border: 3px solid #E7E7E7; border-radius: 24px; color: #FFFFFF; background-color: var(--green);} */


/* header > div {display: flex; flex-direction: row; align-items: center; justify-content: space-evenly; gap: 24px;} */

/* header p {width: 100%; color: var(--secondary)} */






/* FINAL VERSION THIS TIME */


.flexible-col {display: flex; flex-direction: column;}
.flexible-row {display: flex; flex-direction: row;}

.select-discrete {border: none; box-shadow: none; background-color: inherit; color: inherit; font-size: inherit; appearance: none; outline: none;}


/* UI */
.overlay-form {padding: 30px 30px; gap: 24px; display: flex; flex-direction: column; align-items: end; border-radius: 12px; background-color: var(--white);}
.overlay-form > label:first-child {display: flex; align-items: center; justify-content: space-between;}
.overlay-form > label > p:first-child {font-size: 24px;}
.overlay-form > div:last-child {display: flex; gap: 16px; align-items: center; justify-content: right;}
.overlay-form label, div, p {width: 100%;}

#topbar {z-index: 990; display: flex; position: fixed; top: 0px; left: 0px; margin: 0px; padding: 0px 30px; height: 80px; width: calc(100% - 60px); justify-content: space-between; align-items: center; border-bottom: 1px solid var(--background); background-color: var(--white);}
#topbar > ul {list-style: none; display: flex; gap: 20px; background-color: #FFFFFF; margin: 0; padding: 0; align-items: center;}
#topbar > ul > li > a {text-decoration: none; color: inherit}



.sidebar-icons {cursor: pointer; height: 44px; width: 44px; display: flex; align-items: center; justify-content: center; border-radius: 8px;}
.sidebar-icons a {margin:0px; padding: 0px; display: flex; align-items: center; justify-content: center;}
.sidebar-icons:hover {background-color: var(--background);}
.sidebar-icons img {height: 32px; width: 32px;}
.sidebar-icons:first-child {margin: 18px 0px 40px 0px;}











#messages-table-list {table-layout: fixed; margin: 0px 30px; padding: 0px; width: calc(100% - 60px); box-sizing: border-box; border-collapse: collapse;}




#users-table-list {margin: 0px 30px; padding: 0px; width: calc(100% - 60px); box-sizing: border-box; border-collapse: collapse;}


#signin-form > * {margin: 24px 0px}

.textInSeparator {display: flex; align-items: center; text-align: center;} 
.textInSeparator span {padding: 0 8px;}
.textInSeparator::before, .textInSeparator::after {content: ""; flex-grow: 1; height: 1px; background-color: var(--background);}

/*
990 - Top bar
991 - Side bar
992 - Overlay
993 - Overlay content
*/

.button {padding: 12px 16px; cursor: pointer; border: none; border-radius: 999px; box-shadow: none; color: var(--white); background-color: var(--accent); font-size: 14px; font-weight: 700;}
.button-secondary {padding: 12px 16px; cursor: pointer; border: none; border-radius: 999px; box-shadow: none; color: var(--white); background-color: var(--secondary); font-size: 14px; font-weight: 700;}





.button-primary {padding: 12px 16px; border: none; border-radius: 12px; box-shadow: none; color: var(--white); background-color: var(--accent); font-size: 14px; font-weight: 700;}

/* .button-primary:hover, .button-secondary:hover {cursor: pointer;} */


/* #messages-table-list tr td {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} */



#messages-table-list > tr > td:first-child {height: 28px;}
#messages-table-list tr td:last-child {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
#messages-form-view {width: 50%;}


.card {border: 1.9px solid var(--background)}

.max-width {width: 100%;}
.rounded-corners {border-radius: 16px;}

.loading {background-color: var(--background); border-radius: 12px; margin: 0px; padding: 0px; color: var(--background); animation: isLoading 0.7s infinite alternate;}





#overlay-content {z-index: 993; position: fixed; width: 100%; height: 100%; display: none; align-items: center; justify-content: center;}




/* .overlay-form p {width: 100%; text-align: left;}
.overlay-form > label:first-child {padding: 0px 0px 12px 0px; display: flex; align-items: center; justify-content: space-between;}
.overlay-form > label > p {font-size: 24px;}
.overlay-form > button:last-child {margin: 24px 0px 12px 0px; width: 30%;} */

/* #users-form-create {z-index: 994; pointer-events: none;} */

.color-gradient {background-image: linear-gradient(to top right, var(--accent), var(--green));}

/* GENERAL */

/* #overlay {display: none; position: fixed; z-index: 992; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.75);} */




/* {box-sizing: border-box; box-shadow: none; border-radius: 4px; border: 1px solid #777777; font-size: 14px; appearance: none;} */

.a-discrete {text-decoration: none; color: inherit;}
.background-accent {background-color: var(--accent);}
.center-horizontally {justify-content: center;}
.center-vertically {align-items: center;}

.foreground-accent {color: var(--accent);}


/* Page Specific */










tr {background-color: inherit;}




/* TEST CODE */





/* FINAL ^ */
.test-button {margin: 0px; padding: 8px 12px; border-radius: 12px; background-color: var(--accent); color: #FFFFFF;}


#sidebars-content {margin: 0px; padding: 80px 0px 0px 210px; width: calc(100%-300px); background-color: var(--background)}
#sidebars {z-index: 991; display: flex; flex-direction: column; position: fixed; top: 80px; left: 10px; margin: 0px; padding: 140px 0px 0px 0px; width: 200px; height: 50%; gap: 24px; box-shadow: 2px 2px 12px #999999; background-color: #8cbb7a; color: #FFFFFF;}
    /* #sidebar a img {padding: 0px 12px 0px 30px;} */







.button-circular {cursor: pointer; margin: 0px; padding: 8px; border-radius: 100px; box-shadow: 1px 1px 6px #888888; background-color: var(--accent); color: #FFFFFF}
.button-circular:hover {transform: scale(1.08);}

/* MODIFIERS - GLOBAL */
input {margin: 0px; padding: 0px 8px; min-height: 40px; box-sizing: border-box; box-shadow: none; border-radius: 4px; border: 1px solid #777777; font-size: 16px;}
input:focus, input:focus-visible {border: 2px solid var(--accent); outline: none;}
/* form > select {margin: 0px; padding: 0px 8px; width: 100%; height: 40px; min-height: 40px; box-sizing: border-box; box-shadow: none; border-radius: 4px; border: 1px solid #777777; font-size: 14px; appearance: none;} */


#form-transactions-add input[type=number], #form-transactions-add input[type=date] {width: 100%;}

/* MODIFIERS - OPTIONAL */




#form-transactions-add {margin: 0; padding: 32px 24px; width: 40%; background-color: #FFFFFF; display: none; flex-direction: column; gap: 24px; align-items: end; justify-content: center; }
    #form-transactions-add label {padding: 0px 0px 12px 0px; width: 100%; text-align: start; font-size: 24px;}
    #form-transactions-add input {margin: 0; padding: 4px 8px; width: calc(100% - 16px); font-size: 16px;}

/* GENERAL UI CUSTOMIZATION */
/* #form-transactions-add {margin: 0 auto; text-align: center; padding: 24px; width: 40%; height: 50%; z-index: 1000; position: relative; background-color: #FFFFFF;} */

/* GENERAL UI */

#table-transactions-add {height: 28px;}








#transactions-form {z-index: 994; width: 75%; height: 800px; position: relative; top: 90px; left: 90px;}

/* < DASHBOARD */
#table-transactions {width: 100%; text-align: left;}
#table-transactions tr:nth-child(even) {border-bottom: 1px solid #E7E7E7;}
/* > DASHBOARD */




.profile-icon {cursor: pointer; display: flex; width: 36px; height: 36px; align-items: center; justify-content: center; border: 3px solid #E7E7E7; border-radius: 24px; color: #FFFFFF; background-color: var(--green);}



/* group should be card */
.group {padding: 16px; border: 1px solid #999999; border-radius: 12px;}


.user-photo {width: 44px; height: 44px; background-color: #93d07c; border: 8px solid red; border-radius: 30px; text-align: center; vertical-align: middle; align-items: center; justify-content: center;}


.tint-sale {background-color: #93d07c; border-radius: 100px; text-align: center; color: #FFFFFF;}
.tint-purchase {background-color: #d26f6f; border-radius: 100px; text-align: center; color: #FFFFFF;}






/* ^.^ */


.table {border-collapse: collapse; text-align: left;}
.table thead tr th {border-bottom: 2px solid #999999; color: #999999;}



#dashboard-transactions {margin: 0px 30px; width: calc(100% - 60px); background-color: #FFFFFF; }
#dashboard-transactions thead {width: 100%;}
#dashboard-transactions thead tr th {font-weight: 400; text-transform: uppercase;}









/* .button {padding: 12px 16px; border: none; border-radius: 12px; box-shadow: none; color: #FFFFFF; background-color: var(--accent); font-size: 14px; font-weight: 700;} */

.padding-horizontal {padding-left: 30px; padding-right: 30px;}
.padding-vertical {padding-top: 24px; padding-bottom: 24px;}

/* Page Specific */
#home-vending-variety {margin: 0px; padding: 0px; list-style: none; display: flex; justify-content: center; flex-direction: row; gap: 20px;}
#home-vending-variety li {width: 280px; border-top: 6px solid var(--accent);}

/* UI */
#hamburger {display: none; flex-direction: column; cursor: pointer;}
#hamburger span {width: 24px; height: 3px; border-radius: 9px; background: var(--accent); margin: 2.5px 0px;}
.hamburger-content.active {max-height: 100px;}
.hamburger-content {display: block; margin: 0px; padding: 0px; position: absolute; top:80px; left: 0px; max-height: 0px; width: 100%; overflow: hidden; background-color: inherit; padding: 0px; text-align: center; border-bottom: 1.5px solid #EEEEEE; transition: max-height 0.4s ease;}
.hamburger-content p {justify-content: center; margin: 0px; padding: 12px 0px;}
.hamburger-content p:hover {background-color: var(--accent); color: #FFFFFF;}
.hamburger-content p a {text-decoration: none; color: inherit;}







body {margin: 0px; padding: 0px; font-family: 'Inter'; font-size: 16px; background-color: #FFFFFF;}
footer {z-index: 992; margin: 0px 30px; padding: 30px 0px; border-top: 1px solid #CCCCCC; font-size: 12px;}

/* button, .button {padding: 12px 16px; border: none; border-radius: 12px; box-shadow: none; color: #FFFFFF; background-color: #F14938; font-size: 14px; font-weight: 700;}
button:hover {cursor: pointer;} */
#contact-form input[type=text], textarea {padding: 12px; box-sizing: border-box; box-shadow: none; border-radius: 8px; border: 1px solid #000000; font-size: 14px;}
#contact-form input[type=password], textarea {padding: 12px; box-sizing: border-box; box-shadow: none; border-radius: 8px; border: 1px solid #000000; font-size: 14px;}

#page {margin: 80px 0px 30px 0px;}

#contact-form {margin: 0 auto; max-width: 540px;}
#contact-form > * {padding: 12px 0px;}


.footer-legal {float: right;}

.center-text {text-align: center;}
.inherit {color: inherit;}
.maxWidth {width: 100%;} /*  temp */

.separator-text::after {content: "|"; margin: 0px 4px;}


.cards {display: flex; gap: 24px; flex-wrap: wrap; justify-content: center;}
.cards-content {background: #FFFFFF; box-shadow: 0 4px 8px rgba(0,0,0,0.1); overflow: hidden;}
.hero {display: flex; align-items: center; justify-content: space-around; vertical-align: middle; overflow: hidden;}

@keyframes isLoading {
    from {opacity: 0.2;}
    to {opacity: 1;}
}

@keyframes spin {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

@media only screen and (max-width: 600px) {
    footer span {display: flex; justify-content: center;}
    #topbar ul {display: none;}

    #home-vending-variety {flex-direction: column;}
    #home-vending-variety li {width: calc(100%); justify-content: center; text-align: center; margin: 0 auto;} 

    #contact-form {max-width: 90%;}
    #hamburger {display: flex;}
}

@media only screen and (max-width: 800px) {
    /* #sidebar {width: 50px;} */
    .hero {flex-direction: column; text-align: center;}
}

@media only screen and (min-width: 600px) {
    #hamburger-content {display: none;} 
}



/* TEST */

/* table {text-align: left;}
tr {border: 1px solid blue;}

table thead {color: var(--accent)}
 */

#dash-user {text-transform: capitalize;}